import React from 'react';
import ReactDOM from 'react-dom';
import mirror, { connect, actions } from 'mirrorx';
import { Carousel, WhiteSpace, WingBlank, List } from 'antd-mobile';
import {API} from '../api'

const Item = List.Item;
const Brief = Item.Brief;


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            barWidth: "auto",
            productTypeList: [],
            productList: [],
            typeCode:''
        }      

        if (!T.cookie.get('uid')) {
            //actions.routing.push({pathname: '/', search: 'backurl=' + encodeURIComponent(location.href)})
          }
    }

    componentDidMount() {     
        const Lang = window.LangMessage ||{}  
        this.requestFusionList(null);
        const productTypeList = [
            {name:Lang.all_yj || 'All',code:null},            
            {name:'Medical',code:[7]},
            {name:'Characteristic',code:[1]},
            {name:'Accident',code:[6]}          
        ];
        this.setState({ productTypeList:productTypeList,typeCode:productTypeList[0].code}, () => {
            this.setBarWidth();
        })
    }
    requestFusionList =(categoryList)=>{
        T.fetch2({
            url:API.queryChannelGoodsList.path,
            data:{
                pageIndex:1,
                pageSize:10,
                userId:'',
                channelId:'',
                statusList:[1],
                categoryList:categoryList
            },
            loading:true
          }).then((res)=>{    
            if(res.value){
              this.setState({          
                productList:res.value.rows || []
              })
            }     
          })       
      }  

    setBarWidth = () => {
        let scrollBar = T.get("scrollBar");
        let children = scrollBar.children;
        let len = 0;
        for (let i = 0; i < children.length; i++) {
            len += children[i].offsetWidth + 20;
        }
        this.setState({ barWidth: len + 10 })
    }
  
    toProductDetail=(item)=>{  //跳转到相应的商品详情页 
        location.href=`/product-detail-yj-en?productName=${item.name}&channelGoodsId=${item.id}&goodsId=${item.goodsId}`      
    }
    tabClick =(code)=>{
        this.setState({
            typeCode:code
        })         
       this.requestFusionList(code);
       
    }

    render() {
        const {productList,bannerList,productTypeList,typeCode,barWidth} = this.state;        
        
        return (<div className="main product-list bor-top">        

            <div className="yh-logo diy_color tac bgfw bor-bottom">Insurance Market<div className='listicon' onClick={()=>location.href='/policy-list-yj-en'}></div></div>

            <div className="scroll-view">
                <ul className="scroll-bar bor-bottom" id="scrollBar" style={{ width: barWidth }}>
                    {productTypeList.map((item, index) => <li
                        onClick={() => this.tabClick(item.code)}
                        className={"scroll-item fl " + (typeCode == item.code ? "active-grab" : "")}
                        key={index}>{item.name}</li>
                    )}
                </ul>
            </div>
           
            <div className="content-view">              
                <ul id="cardsList">
                    <li className="content-item cards-list-view" >
                        <ul className="card-list">
                            {productList  && productList.map((item, index) =>
                                <div key={index}  className="data">
                                <li className="card" onClick={ ()=>this.toProductDetail(item) }>                                           
                                    <img className="card-img" src={T.formatUrl(item.mainImage)} />                                                                                 
                                    <div className="intro" style={{position:'relative'}}>
                                        <p className="title f32 fc3 fl">{item.name}</p>
                                        <p className="desc f24 fc8 fl">{item.introduction}</p>                                        
                                    </div>
                                </li>                          
                            </div>
                            )}  
                            {productList.length<=0 && 
                                <div className="f30 bgw no-data"> NO Data</div>
                            }                          
                        </ul>
                    </li>
                </ul>
            </div>
           
        </div>
        )
    }
}

export default App;   